<template>
	<div style="font-family: '微软雅黑';">
		<div class="head">
			<a @click="$router.back(-1)" class="return"></a>
		</div>
		<div class="overlay">
			<div class="overlay-content scrolling">
				<div class="card-padding">
					<p class="content-title" v-text="news.title"></p>
					<p class="content-time"><span>发布时间</span>：<span v-text="news.createTime"></span></p>
					<div class="content">
						<img :src="news.imgUrl" alt="">
						<div v-html="news.content"></div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import { newDetails } from './../../utils/api';
	let _this;
	export default {
		name: 'NewsDetails',
		data() {
			return {
				id: this.$route.query.id,
				news: []
			}
		},
		beforeCreate() {
			_this = this;
		},
		mounted() {
			this.$vux.loading.show({
				text: '加载中...'
			})
			this.getList();
		},
		methods: {
			getList() {
				newDetails.getDiscover({
					id: _this.id
				}).then(res => {
					if(res.code == 200) {
						this.news = res.data;
					}
				})
			}
		}
	}
</script>

<style scoped lang="less">
	.overlay-content {
		background: #fff;
	}
	
	.overlay-content {
		padding: 0 10px;
	}
	
	.card-padding {
		padding-bottom: 20px;
	}
	
	.content-title {
		padding: 10px 0;
		text-align: center;
		font-size: 19px;
	}
	
	.content-time {
		color: #999;
		font-size: 13px;
		margin-bottom: 10px;
	}
	
	.content {
		font-size: 14px;
		color: #333;
		/deep/ img {
			width: 100%;
			padding: 5px 0;
		}
	}
	
	/deep/ .ql-video {
		width: 100%;
	}
	
	.tag {
		background: #f5f5f5;
		color: #666;
		display: inline-block;
		padding: 0 15px 0 10px;
		font-size: 13px;
		position: relative;
		margin-bottom: 20px;
		&:before {
			position: absolute;
			right: 5px;
			top: 6px;
			content: " ";
			width: 0;
			height: 0;
			border-top: 4px solid transparent;
			border-bottom: 4px solid transparent;
			border-left: 4px solid #666;
		}
	}
</style>